<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>
  
  <script setup>
  import {ref,onMounted}  from 'vue'
  import * as echarts from 'echarts';
  
  //搜索用的
  const socket = ref(null)
  const mes = ref()
  // const mlist=ref([{"id":1,"name":"张三"},{"id":2,"name":"李四"}])
  const namelist = ref([])
  const valuelist = ref([])

  const initChart = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '大棚状态'
      },
      tooltip: {},
      legend: {
        data: ['温度']
      },
      xAxis: {
        data: namelist.value
      },
      yAxis: {},
      series: [
        {
          name: '温度',
          type: 'bar',
          data: valuelist.value
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  
  
  const initwesockt=()=>{
      socket.value = new WebSocket("ws://127.0.0.1:8000/room/1/");
  
      // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
      socket.value.onopen =  (event)=>{
          console.log("连接成功")
      }
  
      // 回调函数，客户端接收服务端消息
      socket.value.onmessage =  (event)=>{
        var data  = JSON.parse(event.data)
        console.log(data)
        mes.value=data
        namelist.value = data.namelist
        valuelist.value = data.valuelist
        initChart()
        //data {"name":'zs',"id":1}
        //mlist.value.push(data)
      }
  
      // // 当断开连接时，触发该函数
      // this.socket.onclose =function (event){
      // let tag = document.createElement("div");
      // tag.innerText = "[连接断开]";
      // document.getElementById("message").appendChild(tag);
      // }
  
  
  }
  
  onMounted(()=>{
      initwesockt()
  })
  </script>